<template>
  <div id="temp">
    <mt-header fixed title="先锋论坛"></mt-header>
    <!--2.选项卡-->
    <div id="tempTitle">
      <ul class="tabs clearfix">
        <li v-for="(tab,index) in tabsName">
          <span href="#" class="tab-link" @click="tabsSwitch(index)"
                v-bind:class="{active:tab.isActive}">{{tab.name}}</span>
        </li>
      </ul>
    </div>
    <div class="cards">
      <!--第一块内容-->
      <div class="tab-card" style="display: block;">
        <div class="tab-body">
          <!--<ul>-->
          <!--<li v-for="video in list" class="content">-->
          <!--<img :src=video.img_url alt="">-->
          <!--<p>{{video.title}}</p>-->
          <!--</li>-->
          <!--</ul>-->
          <div class="tab-body forum-tab-body">
            <ul class="forum-box">
               <li data-url="forumDetail.html">
                  <div class="forum-title">
                      <span>郑党员</span>
                      <em>07-13 11:12</em>
                  </div>
                  <span>香洲区党支部 正式党员</span>
                  <h5>如果你无法简洁的表达你的想法</h5>
                  <p>
                      如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。
                  </p>
                  <div class="forum-num">
                    <!--<img class="forum-num" src="../../../statics/imgs/images/comment_gray.png" alt="">-->
                      12 人评论
                  </div>
              </li>
              <li data-url="forumDetail.html">
                <div class="forum-title">
                  <span>郑党员</span>
                  <em>07-13 11:12</em>
                </div>
                <span>香洲区党支部 正式党员</span>
                <h5>如果你无法简洁的表达你的想法</h5>
                <p>
                  如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。
                </p>
                <img src="../../../statics/imgs/images/img.jpg" alt="">
                <div class="forum-num">
                  <!--<img src="../../../statics/imgs/images/comment_orange.png" alt="">-->
                  12 人评论
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--第二内容-->
      <div class="tab-card">
        <div class="tab-body forum-tab-body forum">
          <ul class="forum-box">
            <li data-url="forumDetail.html">
              <div class="forum-title">
                <span>杨党员</span>
                <em>07-13 11:12</em>
              </div>
              <span>香洲区党支部 正式党员</span>
              <h5>如果你无法简洁的表达你的想法</h5>
              <p>
                如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。
              </p>
              <div class="forum-num">
                <!--<img class="forum-num" src="../../../statics/imgs/images/comment_gray.png" alt="">-->
                12 人评论
              </div>
            </li>
            <li data-url="forumDetail.html">
              <div class="forum-title">
                <span>郑党员</span>
                <em>07-13 11:12</em>
              </div>
              <span>香洲区党支部 正式党员</span>
              <h5>如果你无法简洁的表达你的想法</h5>
              <p>
                如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。如果你无法简洁的表达你的想法，那只说明你还不够了解它。
              </p>
              <img src="../../../statics/imgs/images/img.jpg" alt="">
              <div class="forum-num">
                <!--<img src="../../../statics/imgs/images/comment_orange.png" alt="">-->
                12 人评论
              </div>
            </li>
          </ul>
        </div>

      </div>
    </div>


  </div>
</template>

<script>
  //     按需导入访问错误
  import {Toast} from 'mint-ui';
  import kit from '../../kits/apikit.js'

  export default {
    data() {
      return {
        list: [],
        news: [],
        tabsName: [{
          name: "全部",
          isActive: true
        }, {
          name: "我的帖子",
          isActive: false
        }],
        active: false
      }
    },
    created() {
      this.getactitylist();
      this.getnewsList();
    },
    methods: {
      //党课课件
      getactitylist() {
        var url = kit.apikit + 'type=getnewslist';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.messge);
            return;
          }
          this.list = body.message;
          console.log(this.list);
        });
      },
      //教学资源
      getnewsList: function () {
        //获得新闻列表的数据
        var url = kit.apikit + 'type= getnewslist';
        //要通过vue-resource去请求数据
        this.$http.get(url).then(function (res) {
          if (res.body.status != 0) {
            //说明数据出现了问题
            Toast(res.body.message);
            return
          }
          //说明数据正常
          this.news = res.body.message;
        });
      },
//选项卡
      tabsSwitch: function (tabIndex) {
        var tabCardCollection = document.querySelectorAll(".tab-card"),
          len = tabCardCollection.length;
        for (var i = 0; i < len; i++) {
          tabCardCollection[i].style.display = "none";
          this.tabsName[i].isActive = false;
        }
        this.tabsName[tabIndex].isActive = true;
        tabCardCollection[tabIndex].style.display = "block";
      }
    }
  }
</script>

<style scoped>
  /*头部样式*/
  .mint-header {
    height: .9rem;
    background-color: #4284D8;
    font-size: .35rem;
  }

  /*选项卡样式*/
  #tempTitle {
    position: fixed;
    top: 45px;
    left: 0;
    width: 100%;
    height: .9rem;
    background-color: #fff;
    z-index: 33;
  }

  .tabs li {
    float: left;
    list-style: none;
    width: 50%;
  }

  .tabs .tab-link {
    display: block;
    width: 100%;
    height: 49px;
    text-align: center;
    line-height: 49px;
    color: #808080;
    text-decoration: none;
  }

  .tabs .tab-link.active {
    height: 47px;
    border-bottom: 2px solid #EC542E;
    color: #EC542E;
    transition: .3s;
  }

  .cards {
    float: left;
    width: 100%;
    margin-top: 1rem;
  }

  .cards .tab-card {
    display: none;
  }

  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
  }

  /*视频样式*/
  .tab-body .videoList {
    margin-top: -4em;
    background: #fff;
    box-shadow: 0 -0.02rem 0.06rem rgba(0, 0, 0, .03);
    overflow: hidden;
    padding: .3rem .3rem 0;
    border-bottom: 1px solid #ECECEC;
  }

  .tab-body .videoList li {
    float: left;
    box-sizing: border-box;
    width: 50%;
    height: 4.5rem;
    padding-right: .15rem;
    margin-bottom: .26rem;
    overflow: hidden;
  }

  .tab-body .videoList li img {
    width: 100%;
    height: 3rem;
  }

  /*2.图片大小*/
  .mui-table-view {
    margin-top: 1rem;
  }

  .mui-table-view img {
    height: 80px;
    width: 80px;
  }

  .mui-table-view .mui-media-object {
    max-width: 80px;
    line-height: 80px;
  }

  .ft {
    margin-top: 1.5em;
    font-size: 10px;
    color: #AEAEAE;
  }

  /*视频*/
  .video-ul{
    margin-top: -4rem;
  }
  .color{
    color: #101010;

  }
  .mui-table-view{
    margin-top: .8rem;
  }

   .forum-num {
    border-top: 1px dashed #ECECEC;

    line-height: .76rem;
    font-size: .3rem;
    color: #888;
    padding-left: .5rem;
    /*background: url(../image/comment_gray.png) no-repeat left center;*/
    background-size: .4rem .4rem;
  }
  .tab-body{
    margin-top: -2rem;
  }
  .forum{
    margin-top: -1.6rem;
  }
</style>
